<template>
	<view class="page">
		<view class="login-title">
			登录
		</view>
		<view class="form">
			<input type="" v-model="formData.username" autocomplete placeholder="请输入登录账号" />
			<input type="password" v-model="formData.password" autocomplete placeholder="请输入登录密码" />
		</view>
		<view class="login-btn" @click="loginBtn">
			登录
		</view>
		<view class="contact" @click="call()">
			联系平台：{{contact}}
		</view>
	</view>

</template>

<script setup>
	import {
		encrypt,
		decrypt
	} from "@/utils/jsencrypt";
	import {
		getContact,
		loginApi,
		getInfo
	} from "@/api/index.js"
	import {
		reactive,
		ref
	} from "vue"
	const formData = reactive({
		username: "",
		password: ""
	})
	const contact = ref("")
	const loginBtn = () => {
		loginApi({
			username: formData.username,
			password:encrypt(formData.password),
		}).then(res => {
			uni.setStorageSync('Authorization', res.token)
			getInfoFn()
		})
	}
	const getInfoFn = () => {
		getInfo().then(res => {
			uni.setStorageSync('userinfo', res.user)
			uni.reLaunch({
				url: "/pages/points-ranking/points-ranking"
			})
		})
	}
	const getContactFn = () => {
		getContact().then((res) => {
			contact.value = res.data;
		});
	}
	const call=()=>{
			  uni.makePhoneCall({
				phoneNumber:contact.value,
				success:function(){
					console.log('拨打电话成功');
				},
				fail() {
					console.log('打电话失败了');
				}
			})
			}
	getContactFn()
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('../../static/hongqi.png');
		background-repeat: no-repeat;
		position: absolute;
    	top: 0;
	}
	.contact {
		font-size: 24rpx;
		color: $uni-text-color-inverse;
		margin: 40rpx auto;
		width: fit-content;
	}

	.login-btn {
		width: 690rpx;
		height: 96rpx;
		margin: auto;
		background: #f5354e;
		border-radius: 10rpx;
		text-align: center;
		line-height: 96rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #fff;
		margin: 80rpx 30rpx 0 30rpx;
	}

	.form {
		margin: 60rpx 30rpx 0 30rpx;
	}

	input {
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.6);
		padding-bottom: 24rpx;
	}

	input:first-of-type {
		margin-bottom: 50rpx;
	}
	::v-deep .uni-input-input, .uni-input-placeholder {
		color: $uni-text-color-inverse;
	}
	.login-title {
		color: $uni-text-color-inverse;
		font-size: 40rpx;
		font-weight: 600;
		margin: 150rpx 30rpx 0 30rpx;
	}
</style>